<script setup lang="ts">
const modelVal = defineModel<string>()
const iconDialogRef = $ref<SyIconDialogInstance>()

async function showDialog() {
  if (!iconDialogRef)
    return
  const { type, icon } = await iconDialogRef?.showDialog()

  if (!type)
    return

  modelVal.value = icon
}
</script>

<template>
  <div
    un-w-full
  >
    <el-input
      v-model="modelVal"
      placeholder="请选择图标"
      v-bind="$attrs"
      readonly
      @click="showDialog"
    >
      <template #append>
        <sy-icon
          :icon="(modelVal as any)"
        />
      </template>
    </el-input>
    <sy-icon-dialog ref="iconDialogRef" />
  </div>
</template>

<style scoped></style>
